<template>
	<view class="container product-list">


		<HeaderNav>></HeaderNav>
		<view class="rf-header-box">
			<view class="rf-header flex-row f-j-s" :style="{width:width+'px',height:height+'px'}">
				<view class="rf-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
					<text class="iconfont iconzuo"></text>
				</view>
				<view class="input-box"  style="flex:1; min-width:0;" :style="{marginTop:inputTop+'px'}">
					<input
						v-model="keyword"
						@confirm="search"
						placeholder="请输入关键字"
						placeholder-style="font-size: 24upx; color:#ccc;"
						type="text" />
					<text class="icon iconfont iconsousuo2" @tap.stop="search"></text>
				</view>
				<view class="search-ad" :style="{marginTop:inputTop+'px'}">

					<view class="rf-top-item rf-icon-ml" @tap="screen" data-index="3">
						<text>筛选</text>
						<!--<rf-icon name="screen" :size="12" color="#333" rf-icon-class="rf-ml" :bold="true"></rf-icon>-->
					</view>

					<!-- <view class="rf-top-item" @tap="screen" data-index="2">
						<text class="iconfont" :class="isList>0? 'iconliebiaoqiehuan':'iconfenlei'"></text>
					</view> -->

				</view>



			</view>
		</view>

		<view class="product-list-wrapper">
				<!-- <rf-product-list :bottom="0" :list="productList" :isList="isList" :style="{paddingTop: 90 + 'rpx' }"></rf-product-list> -->
				<rf-product-list :bottom="0" :list="productList" :isList="isList" :style="{paddingTop: 0 + 'rpx' }"></rf-product-list>
		</view>
		<rf-load-more
			:status="loadingType"
			v-if="productList.length > 0"
		></rf-load-more>
		<rf-empty
			:info="errorInfo || '该分类暂无商品'"
			v-if="productList.length === 0 && !loading"
		></rf-empty>
		<!--顶部下拉筛选弹层 属性-->
		<rf-top-drawer bgcolor="#f7f7f7" :show="dropScreenShow" :paddingbtm="110" :translatey="dropScreenH" @close="btnCloseDrop">
			<scroll-view class="rf-scroll-box" scroll-y :scroll-top="scrollTop">
				<view class="rf-seizeaseat-20"></view>
				<view class="rf-drop-item rf-icon-middle" :class="[item.selected?'rf-bold':'']" v-for="(item,index) in attrData" :key="index" @tap.stop="btnSelected" :data-index="index">
					<text class="iconfont icongouxuan" :class="'text-' + themeColor.name" :size="16" :bold="true" v-if="item.selected" rf-icon-class="rf-middle"></text>
					<text class="rf-ml rf-middle">{{item.name}}</text>
				</view>
				<view class="rf-seizeaseat-30"></view>
			</scroll-view>
			<view class="rf-drop-btnbox">
				<view class="rf-drop-btn confirm-btn" :hover-stay-time="150" @tap="reset">重置</view>
				<view class="rf-drop-btn confirm-btn" :hover-stay-time="150" @tap="btnSure">确定</view>
			</view>
		</rf-top-drawer>
		<!---顶部下拉筛选弹层 属性-->
		<!--左抽屉弹层 筛选 -->
		<uni-drawer
			class="rf-drawer"
			:visible="drawer"
			mode="right"
			@close="closeDrawer()"
		>
			<view class="rf-drawer-box" :style="{paddingTop:height+'px'}">
				<scroll-view class="rf-drawer-scroll" scroll-y :style="{height:drawerH+'px'}">
					<!-- <view class="rf-drawer-title">
						<text class="rf-title-bold">价格区间</text>
						<view class="rf-attr-right" :class="'text-' + themeColor.name">
							<text>请输入价格区间</text>
						</view>
					</view>
					<view class="rf-drawer-content">
						<input placeholder-class="rf-phcolor" v-model="minPrice" class="rf-input" placeholder="最低价" maxlength="11" type='number' />
						<text>-</text>
						<input placeholder-class="rf-phcolor" v-model="maxPrice"  class="rf-input" placeholder="最高价" maxlength="11" type='number' />
					</view> -->

					<!-- 保留现有的分类 -->
					<view class="rf-drawer-title">
						<text class="rf-title-bold">分类选择</text>
						<view class="rf-attr-right" :class="'text-' + themeColor.name">
							<text>请选择分类</text>
						</view>
					</view>
					<view class="rf-drawer-content 1111">
						<!-- 树形分类选择器 -->
						<view class="picker-trigger" @tap="showCategoryPicker">
							<text class="picker-text">{{ selectedCategoryPath || '请选择分类' }}</text>
							<text class="picker-arrow">▼</text>
						</view>

						<rf-picker
						  ref="categoryPicker"
						  :pickerValueArray="categoryOptions"
						  v-model="selectedCategoryIndex"
						  mode="selector"
						  @onConfirm="onCategoryConfirm"
						  class="tree-picker"
						>
						  <view class="picker-view">
						    <text style="text-align: left; flex: 1;">{{ selectedCategoryTitle || '请选择分类' }}</text>
						    <text class="picker-arrow">▼</text>
						  </view>
						</rf-picker>

						<!-- 显示当前选择的完整路径 -->
						<view v-if="selectedCategoryPath" class="category-path">
							<text>当前选择: {{ selectedCategoryPath }}</text>
						</view>
					</view>

					<!-- 添加属性筛选部分 -->
					<view class="rf-drawer-title">
						<text class="rf-title-bold">属性筛选</text>
						<view class="rf-attr-right" @tap="toggleSection('attr')">
							<text class="arrow-icon">{{ openSections.attr ? '∧' : '∨' }}</text>
						</view>
					</view>
					<view class="rf-drawer-content" v-show="openSections.attr" style="display: flex; flex-direction: column; width: 100%; padding: 0;">
						<!-- 动态生成规格筛选区块 -->


						<view  v-for="spec in Object.values(specList)" :key="spec.id"
						class="attr-section" style="width: 100%; display: block;padding:0 20rpx; margin-bottom:20rpx; background:#fff;">
							<view class="attr-header" @tap="toggleSection(spec.id)" style="display: flex; justify-content: space-between; align-items: center; padding: 24rpx; background: #fff5f5;">
								<text style="font-size: 28rpx; color: #333;">{{spec.title}}</text>
								<text style="color: #999; font-size: 24rpx;">{{ expandedSpecId === spec.id ? '收起∧' : '展开∨' }}</text>
							</view>
							<view v-show="expandedSpecId === spec.id" style="padding: 20rpx; width: 100%; box-sizing: border-box; background: #fff;">
								<checkbox-group
									style="width: 100%; display: flex; flex-direction: column;"
									@change="(e) => onSpecCheckboxChange(e, spec.id)"
								>
									<label
										v-for="(item, index) in (spec.value || spec.values || [])"
										:key="item.id"
										:class="{'item-selected': selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)}"
										style="display: flex; align-items: center; padding: 20rpx 0; border-bottom: 1px solid #f5f5f5; width: 100%; box-sizing: border-box;"
									>
										<view class="custom-checkbox">
											<checkbox
												:value="item.id"
												:checked="selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)"
												style="transform: scale(0.8); opacity: 0; position: absolute;"
											/>
											<view class="checkbox-icon" :class="{'checkbox-selected': selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)}">
												<text v-if="selectedFilters[spec.id] && selectedFilters[spec.id].includes(item.id)" class="checkbox-tick">✓</text>
											</view>
										</view>
										<text style="margin-left: 10rpx; font-size: 26rpx; color: #333; flex: 1;">{{ item.title }}</text>
									</label>
								</checkbox-group>
							</view>
						</view>


					</view>

					<view class="rf-safearea-bottom"></view>
				</scroll-view>
				<view class="rf-attr-btnbox">
					<view class="rf-attr-safearea">
						<view class="rf-drawer-btn rf-drawerbtn-black  confirm-btn" @tap="resetAll">重置</view>
						<view class="rf-drawer-btn  confirm-btn" @tap="confirmAll">确定</view>
					</view>
				</view>
			</view>
		</uni-drawer>
		<!--左抽屉弹层 筛选-->
		<!--页面加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
		<uni-popup v-if="copySuccessDialog" type="center" :mask-click="false">
		  <view style="padding: 32rpx 48rpx; background: #fff; border-radius: 12rpx; text-align: center;">
		    <text style="font-size: 32rpx; color: #222;">复制成功</text>
		    <view style="margin-top: 32rpx;">
		      <button style="background: #e53935; color: #fff; border-radius: 8rpx; padding: 12rpx 48rpx; font-size: 28rpx;" @tap="copySuccessDialog = false">确定</button>
		    </view>
		  </view>
		</uni-popup>
		<tabBar></tabBar>
	</view>
</template>
<script>
	import HeaderNav from '@/components/header-nav/product.vue';
	import uniDrawer from '@/components/uni-drawer/drawer';
	import rfTopDrawer from '@/components/rf-top-drawer';
	import rfAttrContent from '@/components/rf-attr-content';
	import rfProductList from '@/components/rf-product-list';
	import rfLoadMore from '@/components/rf-load-more/rf-load-more';
	import rfPicker from '@/components/rf-picker/index.vue'; // 修正为 index.vue
	import { cartItemCount, cartItemCreate, productDetail, productList, productCate, productSpec } from '@/api/product';
	import { mapMutations } from 'vuex';
	/* eslint-disable */
	export default {
		components: {
			HeaderNav,
			uniDrawer,
			rfProductList,
			rfAttrContent,
			rfLoadMore,
			rfTopDrawer,
			rfPicker // 注册rf-picker组件
		},
		filters: {
			filterTotalSales (val) {
				if (val > 10000) {
					val = `${(val / 10000).toFixed(2)}w`;
				}
				return val;
			}
		},

		data() {
			return {
			  keyword: '',
			  errorInfo: '',
				loadingType: 'more',
				page: 1,
				loading: true,
				specClass: 'none',
				productDetail: {},
				searchKey: "", //搜索关键词
				width: 200, //header宽度
				height: 64, //header高度
				inputTop: 0, //搜索框距离顶部距离
				arrowTop: 0, //箭头距离顶部距离
				dropScreenH: 0, //下拉筛选框距顶部距离
				attrData: [],
				attrIndex: -1,
				dropScreenShow: false,
				scrollTop: 0,
				tabIndex: 0, //顶部筛选索引
				isList: true, //是否以列表展示  | 列表或大图
				drawer: false,
				drawerH: 0, //抽屉内部scrollview高度
				selectedName: "综合",
				selectH: 0,
				dropdownList: [{
					name: "综合",
					selected: true,
					param: {}
				}, {
					name: "价格升序",
					selected: false,
					param: { price: 'asc' }
				}, {
					name: "价格降序",
					selected: false,
					param: { price: 'desc' }
				}],
				attrArr: [{
					name: "全部",
					selectedName: "全部",
					isActive: false,
					params: {},
					list: []
				}, {
					name: "新品",
					selectedName: "新品",
					isActive: false,
					params: { is_new: 1 },
					list: []
				}, {
					name: "推荐",
					selectedName: "推荐",
					isActive: false,
					params: { is_recommend: 1 },
					list: []
				}, {
					name: "热门",
					selectedName: "热门",
					isActive: false,
					params: { is_hot: 1 },
					list: []
				}
				// 	{
				// 	name: "品牌",
				// 	selectedName: "品牌",
				// 	isActive: false,
				// 	list: [{
				// 		name: "trendsetter",
				// 		selected: false
				// 	}, {
				// 		name: "维肯（Viken）",
				// 		selected: false
				// 	}, {
				// 		name: "AORO",
				// 		selected: false
				// 	}, {
				// 		name: "苏发",
				// 		selected: false
				// 	}, {
				// 		name: "飞花令（FHL）",
				// 		selected: false
				// 	}, {
				// 		name: "叶梦丝",
				// 		selected: false
				// 	}, {
				// 		name: "ITZOOM",
				// 		selected: false
				// 	}, {
				// 		name: "亿魅",
				// 		selected: false
				// 	}, {
				// 		name: "LEIKS",
				// 		selected: false
				// 	}, {
				// 		name: "雷克士",
				// 		selected: false
				// 	}, {
				// 		name: "蕊芬妮",
				// 		selected: false
				// 	}, {
				// 		name: "辉宏达",
				// 		selected: false
				// 	}, {
				// 		name: "英西达",
				// 		selected: false
				// 	}, {
				// 		name: "戴为",
				// 		selected: false
				// 	}, {
				// 		name: "魔风者",
				// 		selected: false
				// 	}, {
				// 		name: "即满",
				// 		selected: false
				// 	}, {
				// 		name: "北比",
				// 		selected: false
				// 	}, {
				// 		name: "娱浪",
				// 		selected: false
				// 	}, {
				// 		name: "搞怪猪",
				// 		selected: false
				// 	}]
				// }
					// {
					// name: "类型",
					// selectedName: "类型",
					// isActive: false,
					// list: [{
					// 	name: "线充套装",
					// 	selected: false
					// }, {
					// 	name: "单条装",
					// 	selected: false
					// }, {
					// 	name: "车载充电器",
					// 	selected: false
					// }, {
					// 	name: "PD快充",
					// 	selected: false
					// }, {
					// 	name: "数据线转换器",
					// 	selected: false
					// }, {
					// 	name: "多条装",
					// 	selected: false
					// }, {
					// 	name: "充电插头",
					// 	selected: false
					// }, {
					// 	name: "无线充电器",
					// 	selected: false
					// }, {
					// 	name: "座式充电器",
					// 	selected: false
					// }, {
					// 	name: "万能充",
					// 	selected: false
					// }, {
					// 	name: "转换器/转接线",
					// 	selected: false
					// }, {
					// 	name: "MFI苹果认证",
					// 	selected: false
					// }, {
					// 	name: "转换器",
					// 	selected: false
					// }, {
					// 	name: "苹果认证",
					// 	selected: false
					// }
				// 	]
				// },
				// 	{
				// 	name: "适用手机",
				// 	selectedName: "适用手机",
				// 	isActive: false,
				// 	list: [{
				// 		name: "通用",
				// 		selected: false
				// 	}, {
				// 		name: "vivo",
				// 		selected: false
				// 	}, {
				// 		name: "OPPO",
				// 		selected: false
				// 	}, {
				// 		name: "魅族",
				// 		selected: false
				// 	}, {
				// 		name: "苹果",
				// 		selected: false
				// 	}, {
				// 		name: "华为",
				// 		selected: false
				// 	}, {
				// 		name: "三星",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀",
				// 		selected: false
				// 	}, {
				// 		name: "诺基亚5",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀4",
				// 		selected: false
				// 	}, {
				// 		name: "诺基",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀",
				// 		selected: false
				// 	}, {
				// 		name: "诺基亚2",
				// 		selected: false
				// 	}, {
				// 		name: "荣耀2",
				// 		selected: false
				// 	}, {
				// 		name: "诺基",
				// 		selected: false
				// 	}]
				// }
				],
				productList: [
				],
				pageIndex: 1,
				pullUpOn: true,
				productCateList: [],
				brandList: [],
				currentCateStr: '',
				currentBrandStr: '',
				minPrice: '',
				maxPrice: '',
				productParams: {},
				copySuccessDialog: false,
				openSections: {
					attr: true
				},
				expandedSpecId: null, // 当前展开的规格ID
				selectedFilters: {
					productClass: [],
					protein: [],
					application: []
				},
				searchText: {
					protein: ''
				},
				productClassList: [],
				proteinList: [
					{ id: '1', title: 'Protein A' },
					{ id: '2', title: 'Protein B' },
					{ id: '3', title: 'Protein C' },
					{ id: '4', title: 'Protein D' },
					{ id: '5', title: 'Protein E' }
				],
				applicationList: [
					{ id: '1', title: '检测' },
					{ id: '2', title: '免疫组化' },
					{ id: '3', title: '测序' },
					{ id: '4', title: '流式细胞术' }
				],
				currentCategory: null,
				currentSubcategory: null,
				currentThirdLevelCategory: null,
				categoryDisplayList: [],
				subcategoryDisplayList: [],
				thirdLevelCategoryDisplayList: [],
				hasSubcategories: false,
				hasThirdLevelCategories: false,
				originalCategoryData: [], // 存储原始分类数据
				flattenedCategories: [], // 存储扁平化后的所有分类
				selectedCategoryId: null, // 当前选中的分类ID
				selectedCategoryPath: '', // 当前选中的分类路径
				selectedCategoryTitle: '', // 当前选中的分类标题
				selectedCategoryIndex: [0], // picker当前选中索引
				specList: [], // 规格列表数据
			}
		},
		created() {
			console.log('测试数据已加载:', this.proteinList, this.applicationList);
			// 初始化数据
			this.getProductSpec();
		},
		onLoad(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
					this.arrowTop = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					this.searchKey = options.searchKey || "";
					//略小，避免误差带来的影响
					this.dropScreenH = this.height * 750 / res.windowWidth + 186;
					this.drawerH = res.windowHeight - uni.upx2px(100) - this.height
				}
			});

			// 同时请求分类和规格数据
			this.getProductCate();
			this.getProductSpec();

			this.initData(options);
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.productList.length = 0;
			this.getProductList('refresh', {});
		},
		// 加载更多
		onReachBottom() {
		  if (this.loadingType === 'nomore') return;
			this.page++;
			this.getProductList();
		},
		methods: {
      ...mapMutations(['setCartNum']),
			// 初始化数据
			initData(options) {
			  let params = {};
			  if (options.cate_id) {
					params.cate_id = options.cate_id;
			  }
				if (options.param) {
				  params = { ...params, ...JSON.parse(options.param) }
				}
				if (options.keyword) {
					this.keyword = options.keyword;
					params.keyword = options.keyword;
				}

				// 检查是否有规格筛选参数
				Object.keys(options).forEach(key => {
					if (key.startsWith('prop_')) {
						params[key] = options[key];

						// 更新选中状态
						const propType = key.replace('prop_', '');
						if (this.selectedFilters[propType]) {
							this.selectedFilters[propType] = options[key].split(',');
						}
					}
				});

				this.productParams = params;
				this.getProductList();
			},
			stopPrevent() {},
			// 规格弹窗开关
			toggleSpec(row) {
				if (parseInt(row.status, 10) === 0) return;
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					if (row.stock === 0) {
						this.$mHelper.toast('库存不足');
						return;
					}
					if (row.type.toString() === '1') {
						// 加入购物车
						this.handleCartItemCreate(row.skuId, row.cartCount);
					} else if (row.type.toString() === '2') {
						// 立即购买
						const list = {};
						const data = {};
						data.sku_id = row.skuId;
						data.num = row.cartCount;
						if (
							this.productDetail.point_exchange_type.toString() === '2' ||
							this.productDetail.point_exchange_type.toString() === '4' ||
							(this.productDetail.point_exchange_type.toString() === '3' &&
								this.isPointExchange)
						) {
							list.type = 'point_exchange';
						} else {
							list.type = 'buy_now';
						}
						list.data = JSON.stringify(data);
						this.navTo(`/pages/order/create/order?data=${JSON.stringify(list)}`);
					}
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.getProductDetail(row);
				}
			},
			hideSpec() {
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 250);
			},
			// 添加商品至购物车
			async handleCartItemCreate(skuId, cartCount) {
				await this.$http
					.post(`${cartItemCreate}`, {
						sku_id: skuId,
						num: cartCount
					})
					.then(async () => {
						await this.$http.get(`${cartItemCount}`).then(async r => {
							this.cartNum = r.data;
							this.setCartNum(r.data);
						});
						this.$mHelper.toast('添加购物车成功');
					});
			},
			// 获取产品详情
			async getProductDetail(row) {
				await this.$http
					.get(`${productDetail}`, {
						id: row.id
					})
					.then(async r => {
						this.productDetail = r.data;
						this.productDetail.sku_name = row.sku_name;
						this.specClass = 'show';
					});
			},
			px(num) {
				return uni.upx2px(num) + "px"
			},
			btnDropChange(e) {
				let index = parseInt(e.currentTarget.dataset.index, 10);
				let arr = JSON.parse(JSON.stringify(this.attrArr[index].list));
				if (arr.length === 0) {
					this.$set(this.attrArr[index], "isActive", !this.attrArr[index].isActive)
				  if (this.attrArr[index].isActive && index === 0) {
				    this.attrArr[1].isActive = false;
				    this.attrArr[2].isActive = false;
				    this.attrArr[3].isActive = false;
				  }
					if (this.attrArr[1].isActive || this.attrArr[2].isActive || this.attrArr[3].isActive) {
				    this.attrArr[0].isActive = false;
				  }
				} else {
					this.attrData = arr;
					this.attrIndex = index;
					this.dropScreenShow = true;
					this.$set(this.attrArr[index], "isActive", false);
					this.scrollTop = 1;
					this.$nextTick(() => {
						this.scrollTop = 0
					});
				}
				let params = {};
				if (this.attrArr[0].isActive) {
					params = {};
				} else {
					params.keyword = this.keyword;
				}
				this.attrArr.forEach(item => {
					if (item.isActive) {
						params = {...params, ...item.params }
					}
				});
				this.page = 1;
				this.productList = [];
				this.loading = true;
				this.productParams = params;
				this.getProductList();
			},
			btnSelected(e) {
				let index = e.currentTarget.dataset.index;
				this.$set(this.attrData[index], "selected", !this.attrData[index].selected)
			},
			async reset() {
      	this.currentBrandStr = '';
      	this.currentCateStr = '';
				this.minPrice = '';
				this.maxPrice = '';
				await this.getBrandList();
				await this.getProductCate();
			},
			btnCloseDrop() {
				this.scrollTop = 1;
				this.$nextTick(() => {
					this.scrollTop = 0
				});
				this.dropScreenShow = false;
				this.attrIndex = -1
			},
			btnSure() {
				let index = this.attrIndex;
				let arr = this.attrData;
				let active = false;
				let attrName = "";
				//这里只是为了展示选中效果,并非实际场景
				for (let item of arr) {
					if (item.selected) {
						active = true;
						attrName += attrName ? ";" + item.name : item.name
					}
				}
				let obj = this.attrArr[index];
				this.btnCloseDrop();
				this.$set(obj, "isActive", active);
				this.$set(obj, "selectedName", attrName);
			},
			showDropdownList() {
				this.selectH = 246;
				this.tabIndex = 0;
			},
			hideDropdownList() {
				this.selectH = 0
			},
			dropdownItem(e) {
				let index = parseInt(e.currentTarget.dataset.index, 10);
				let arr = this.dropdownList;
				for (let i = 0; i < arr.length; i++) {
					if (i === index) {
						arr[i].selected = true;
					} else {
						arr[i].selected = false;
					}
				}
				this.dropdownList = arr;
				this.selectedName = index === 0 ? '综合' : index === 1 ? '价格升序' : '价格降序';
				this.selectH = 0;
				this.page = 1;
				this.productList = [];
				this.loading = true;
				this.productParams = this.dropdownList[index].param;
				this.getProductList();
			},
			screen(e) {
				let index = parseInt(e.currentTarget.dataset.index, 10);
				if (index === 0) {
					this.showDropdownList();
				} else if (index === 1) {
					let params = {}
					if (this.tabIndex === 1) {
						this.tabIndex = null;
						params.total_sales = 'asc';
					} else {
						this.tabIndex = 1;
						params.total_sales = 'desc';
					}
					this.page = 1;
					this.productList = [];
					this.loading = true;
				  this.productParams = params;
					this.getProductList();
				} else if (index === 2) {
					this.isList = !this.isList
				} else if (index === 3) {
					// 确保所有section都可见
					this.openSections.attr = true;

					// 打开抽屉
					this.drawer = true;
				}
			},
			closeDrawer() {
				this.drawer = false;
			  const params = {};
			  if (this.maxPrice) {
			    params.max_price = this.maxPrice;
			  }
			  if (this.minPrice) {
			    params.min_price = this.minPrice;
			  }
			  const brandArr = [];
			  this.brandList.forEach(item => {
				  if (item.isActive) {
					    brandArr.push(item.id);
					  }
			  });
			  if (brandArr.join(',')) {
			    params.brand_id = brandArr.join(',');
			  }
			  const cateArr = [];
			  this.productCateList.forEach(item => {
				  if (item.isActive) {
					    cateArr.push(item.id);
					  }
			  });
			  if (cateArr.join(',')) {
			    params.cate_id = cateArr.join(',');
			  }
				this.page = 1;
				this.productList = [];
				this.loading = true;
				this.productParams = params;
				this.getProductList();
			},
			cateBtnSelected(index) {
			  this.currentCateStr = '';

			  // 切换当前分类的选中状态
				this.$set(this.productCateList[index], "isActive", !this.productCateList[index].isActive);

			  // 获取当前分类的层级
			  const currentLevel = this.productCateList[index].level;
			  const currentId = this.productCateList[index].id;

			  // 如果是选中状态，则取消同级其他分类的选中状态
			  if (this.productCateList[index].isActive) {
			    this.productCateList.forEach((item, idx) => {
			      if (idx !== index && item.level === currentLevel && item.isActive) {
			        this.$set(this.productCateList[idx], "isActive", false);
			      }
			    });
			  }

			  // 更新显示的分类名称
			  const selectedCategories = this.productCateList.filter(item => item.isActive);
			  const categoryNames = selectedCategories.map(item => item.originalTitle || item.title);
			  this.currentCateStr = categoryNames.join(',');

			  console.log('已选分类:', this.currentCateStr);
			},
			brandBtnSelected(index) {
			  this.currentBrandStr = '';
				this.$set(this.brandList[index], "isActive", !this.brandList[index].isActive);
				const brandArr = [];
				this.brandList.forEach(item => {
				  if (item.isActive) {
				    brandArr.push(item.title);
				  }
				});
				this.currentBrandStr = brandArr.join(',');
			},
			// 获取商品分类列表
			async getProductCate() {
				await this.$http
					.get(`${productCate}`)
					.then(r => {
						console.log('分类数据:', r.data);

						// 检查是否有category字段
						const categoryData = r.data.category || r.data;

						if (categoryData && categoryData.length > 0) {
							// 存储原始分类数据
							this.originalCategoryData = categoryData;

							// 扁平化所有分类
							this.flattenedCategories = [];

							// 递归函数处理多级分类
							const processCategoryTree = (categories, level = 0, parentPath = '') => {
								categories.forEach(category => {
									// 使用HTML空格实体和特殊字符表示层级结构，增加视觉上的树状效果
									let prefix = '';
									if (level > 0) {
										// 使用HTML空格实体代替普通空格，确保在所有环境中都能正确显示
										prefix = '        '.repeat(level - 1) + '├─ ';
									}
									let displayTitle ;
									if(category.count ==0  ){
										 displayTitle = prefix + category.title ;
									}else{

										 displayTitle = prefix + category.title + (category.count ? ` (${category.count})` : '');
									}

									const path = parentPath ? `${parentPath} > ${category.title}` : category.title;

									// 添加当前分类到扁平化列表
									this.flattenedCategories.push({
										id: category.id,
										title: displayTitle,
										originalTitle: category.title,
										level: level,
										path: path,
										hasChildren: category.children && category.children.length > 0
									});

									// 处理子分类
									if (category.children && category.children.length > 0) {
										processCategoryTree(category.children, level + 1, path);
									}
								});
							};

							// 开始处理分类树
							processCategoryTree(categoryData);

							console.log('扁平化后的所有分类:', this.flattenedCategories);
						} else {
							console.log('没有分类数据或格式不正确');
						}
					})
					.catch(err => {
						console.error('获取分类数据失败:', err);
					});
			},
			// 获取商品品牌列表
			async getBrandList() {
				await this.$http
					.get(`${brandIndex}`)
					.then(r => {
					  this.brandList = r.data;
					});
			},
			// 获取商品规格列表
			async getProductSpec() {
				await this.$http
					.get(`${productSpec}`)
					.then(r => {
						console.log('规格数据:', r.data);
						if (r.data && r.data.specs) {
							// 1. 先设置规格列表数据
							this.specList = r.data.specs;

							// 2. 初始化所有规格的选中状态
							// 如果是对象，转换为数组进行处理
							const specArray = Object.values(this.specList);
							specArray.forEach(spec => {
								if (spec && spec.id) {
									this.$set(this.selectedFilters, spec.id, []);
								}
							});

							// 3. 在数据和状态都准备好后，设置默认展开的规格
							this.$nextTick(() => {
								// 获取对象的第一个属性的id
								const firstSpec = specArray[0];
								if (firstSpec && firstSpec.id) {
									this.expandedSpecId = firstSpec.id;
									console.log('默认展开第一个规格:', this.expandedSpecId);
								}
							});
						}
					})
					.catch(err => {
						console.error('获取规格数据失败:', err);
					});
			},
			back() {
				if (this.drawer) {
					this.closeDrawer()
				} else {
					this.$mRouter.back();
				}
			},
			search() {
			  this.page = 1;
			  this.productList = [];
			  this.loading = true;
			  this.productParams = { keyword: this.keyword };
			  this.getProductList();
			},
			// 获取商品列表
			async getProductList(type) {
				await this.$http
					.get(`${productList}`, {
						...this.productParams,
						page: this.page
					})
					.then(async r => {
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						this.loadingType = r.data.length === 10 ? 'more' : 'nomore';
						this.productList = [...this.productList, ...r.data];
					})
					.catch(err => {
						this.errorInfo = err;
						this.loading = false;
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
					});
			},
			// 跳转详情
			navTo(route) {
				this.$mRouter.push({ route });
			},
			copyProductInfo(item) {
			  const info = `名称：${item.name}\n简介：${item.sketch}\n型号：${item.model || item.sn || item.code || '-'}\n价格：￥${item.price}\n范围：${item.range || '1-1000pg/mL'}\n灵敏度：${item.sensitivity || '35pg/mL'}`;
			  // #ifdef H5
			  if (navigator && navigator.clipboard) {
			    navigator.clipboard.writeText(info).then(() => {
			      this.copySuccessDialog = true;
			    }, () => {
			      uni.showToast({ title: '复制失败', icon: 'none' });
			    });
			  } else {
			    // 兼容老浏览器
			    const textarea = document.createElement('textarea');
			    textarea.value = info;
			    document.body.appendChild(textarea);
			    textarea.select();
			    try {
			      document.execCommand('copy');
			      this.copySuccessDialog = true;
			    } catch (err) {
			      uni.showToast({ title: '复制失败', icon: 'none' });
			    }
			    document.body.removeChild(textarea);
			  }
			  // #endif

			  // #ifdef MP-WEIXIN || APP-PLUS || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
			  uni.setClipboardData({
			    data: info,
			    success: () => {
			      this.copySuccessDialog = true;
			    },
			    fail: () => {
			      uni.showToast({ title: '复制失败', icon: 'none' });
			    }
			  });
			  // #endif
			},
			toggleSection(specId) {
				// 如果点击的是当前展开的规格，则收起
				if (this.expandedSpecId === specId) {
					this.expandedSpecId = null;
				} else {
					// 否则展开点击的规格
					this.expandedSpecId = specId;
				}
			},

			selectFilter(type, item, e) {
				const index = this.selectedFilters[type].indexOf(item.id);
				if (index > -1) {
					// 如果已经选中，则移除
					this.selectedFilters[type].splice(index, 1);
				} else {
					// 如果未选中，则添加（多选模式）
					this.selectedFilters[type].push(item.id);
				}
				console.log(`${type} 选择变更:`, this.selectedFilters[type]);
			},

			resetAll() {
				// 重置价格区间
				this.minPrice = '';
				this.maxPrice = '';

				// 重置分类选择
				this.resetCategorySelection();

				// 重置所有规格选择
				Object.keys(this.selectedFilters).forEach(key => {
					this.$set(this.selectedFilters, key, []);
				});

				// 重置搜索文本
				this.searchText = {};

				// 重置参数
				if (this.productParams.spec_ids) {
					delete this.productParams.spec_ids;
				}
			},

			confirmAll() {
				const params = {};

				// 添加价格区间参数
				if (this.minPrice) params.min_price = this.minPrice;
				if (this.maxPrice) params.max_price = this.maxPrice;

				// 添加分类参数
				if (this.selectedCategoryId) {
					params.cate_id = this.selectedCategoryId;
				}

				// 收集所有选中的规格值
				const allSelectedIds = [];
				Object.values(this.selectedFilters).forEach(selectedValues => {
					if (Array.isArray(selectedValues) && selectedValues.length > 0) {
						allSelectedIds.push(...selectedValues);
					}
				});

				// 如果有选中的规格，添加到参数中
				if (allSelectedIds.length > 0) {
					params.spec_ids = allSelectedIds.join(',');
				}

				console.log('提交筛选参数:', params);

				this.drawer = false;
				this.page = 1;
				this.productList = [];
				this.loading = true;
				this.productParams = params;
				this.getProductList();
			},
			onProteinCheckboxChange(e) {
				const checkedList = e.detail.value;
				this.$set(this.selectedFilters, 'protein', checkedList);
				console.log('蛋白质选择变更:', this.selectedFilters.protein);
			},
			onApplicationCheckboxChange(e) {
				const checkedList = e.detail.value;
				this.$set(this.selectedFilters, 'application', checkedList);
				console.log('应用选择变更:', this.selectedFilters.application);
			},
			onCategorySelect(e) {
				const index = e.detail.value;
				const selectedCategory = this.flattenedCategories[index];
				this.selectedCategoryId = selectedCategory.id;
				this.selectedCategoryPath = selectedCategory.path;
				this.selectedCategoryTitle = selectedCategory.title;

				// 更新当前选中的分类名称
				this.currentCateStr = this.selectedCategoryPath;

				console.log('已选分类:', this.selectedCategoryPath);
			},
			onCategoryConfirm(e) {
				const idx = e.index[0];
				const selectedOption = this.categoryOptions[idx];
				this.selectedCategoryId = selectedOption.value;
				this.selectedCategoryPath = selectedOption.path;
				this.selectedCategoryTitle = selectedOption.title;
				this.currentCateStr = selectedOption.path;
			},

			// 重置分类选择
			resetCategorySelection() {
				this.selectedCategoryId = null;
				this.selectedCategoryPath = '';
				this.selectedCategoryTitle = '';
				this.currentCateStr = '';

				if (this.productParams.cate_id) {
					delete this.productParams.cate_id;
				}

				if (this.productParams.spec_ids) {
					delete this.productParams.spec_ids;
				}

			},
			showCategoryPicker() {
				this.$refs.categoryPicker.show();
			},
			onSpecCheckboxChange(e, specId) {
				const checkedList = e.detail.value;
				this.$set(this.selectedFilters, specId, checkedList);
				console.log(`规格 ${specId} 选择变更:`, checkedList);
			},
			getFilteredSpecValues(spec) {
				if (!this.searchText[spec.name]) return spec.values;
				return spec.values.filter(item =>
					item.name.toLowerCase().includes(this.searchText[spec.name].toLowerCase())
				);
			}
		},
		computed: {
  filteredProteinList() {
    console.log('过滤蛋白质列表:', this.proteinList, '搜索文本:', this.searchText.protein);
    if (!this.searchText.protein) return this.proteinList;
    return this.proteinList.filter(item =>
      item.title.toLowerCase().includes(this.searchText.protein.toLowerCase())
    );
			},
			categoryOptions() {
				return this.flattenedCategories.map(item => ({
					label: item.title,  // 直接使用 title，它已经包含了缩进和层级标记
					value: item.id,
					level: item.level,
					path: item.path,
					hasChildren: item.hasChildren,
					originalTitle: item.originalTitle
				}));
			}
		},
		watch: {
			specList: {
				handler(newVal) {
					if (newVal && newVal.length > 0 && !this.expandedSpecId) {
						this.expandedSpecId = newVal[0].id;
					}
				},
				immediate: true
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background: $page-color-base;
	}
	/*顶部下拉选择 属性*/
	.rf-scroll-box {
		width: 100%;
		height: 480upx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
		color: $color-white;
		font-size: 30upx;
		word-break: break-all;
	}
	.rf-drop-item {
		color: #333;
		height: 80upx;
		font-size: 28upx;
		padding: 20upx 40upx 20upx 40upx;
		box-sizing: border-box;
		display: inline-block;
		width: 50%;
	}
	.rf-drop-btnbox {
		width: 100%;
		height: 100upx;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		display: flex;
	}
	.rf-drop-btn {
		width: 50%;
		font-size: 32upx;
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		border: 0;
	}
	.confirm-btn {
		background-color: #e53935; // 黑色背景
		color: #fff; // 白色文字
	}
	.rf-dropdownlist {
		width: 100%;
		position: absolute;
		background: $color-white;
		border-bottom-left-radius: 24upx;
		border-bottom-right-radius: 24upx;
		overflow: hidden;
		box-sizing: border-box;
		padding-top: 10upx;
		padding-bottom: 26upx;
		left: 0;
		top: 88upx;
		visibility: hidden;
		transition: all 0.2s ease-in-out;
		z-index: 99;
		.icongouxuan {
			font-size: $font-lg;
			line-height: 88upx;
		}
	}
	.rf-dropdownlist-show {
		visibility: visible;
	}
	.rf-dropdownlist-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: -1;
		transition: all 0.2s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.rf-mask-show {
		opacity: 1;
		visibility: visible;
	}
	.rf-dropdownlist-item {
		color: #333;
		height: 70upx;
		font-size: 28upx;
		padding: 0 40upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	/*顶部下拉选择 综合*/
	.rf-drawer-box {
		width: 686upx;
		font-size: 24upx;
		overflow: hidden;
		position: relative;
		padding-bottom: 100upx;
	}
	.rf-drawer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		box-sizing: border-box;
		height: 80upx;
	}
	.rf-title-bold {
		font-size: 26upx;
		font-weight: bold;
		flex-shrink: 0;
	}
	.rf-location {
		margin-right: 6upx;
	}
	.rf-attr-right {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: right;
	}
	.rf-all-box {
		width: 90%;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.rf-drawer-content {
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		width: 100%;
		box-sizing: border-box;
	}
	.rf-input {
		border: 0;
		height: 64upx;
		border-radius: 32upx;
		width: 45%;
		background: #f7f7f7;
		text-align: center;
		font-size: $font-base;
		color: #333;
	}
	.rf-phcolor {
		text-align: center;
		color: #b2b2b2;
		font-size: 24upx;
	}
	.rf-flex-attr {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.rf-attr-item {
		width: 30%;
		height: 64upx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 4upx;
		box-sizing: border-box;
		border-radius: 32upx;
		margin-right: 5%;
		margin-bottom: 5%;
	}
	.rf-attr-ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 96%;
		text-align: center;
	}
	.rf-attr-item:nth-of-type(3n) {
		margin-right: 0%;
	}
	.rf-attr-btnbox {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 0 30upx;
		background: $color-white;
	}
	.rf-attr-safearea {

		display: flex;
		align-items: center;
		justify-content: space-between;
		/*padding-bottom: env(safe-area-inset-bottom);*/
	}
	.rf-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	.rf-attr-btnbox::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	.rf-drawer-btn {
		width: 47%;
		text-align: center;
		height: 60upx;
		border-radius: 30upx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.rf-drawerbtn-black {
		border: 1upx solid;
	}
	.product-list {
		padding-bottom: env(safe-area-inset-bottom);
		/* 隐藏scroll-view滚动条*/
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
		.rf-header-box {
			width: 100%;
			background: $color-white;
			// position: fixed;
			z-index: 100;
			left: 0;
			top: 0;
			.rf-header {

				.rf-back {
					margin-left: 8upx;
					height: 32px !important;
					width: 32px !important;
					display: flex;
					justify-content: center;
					align-items: center;
					.iconzuo {
						font-size: $font-lg + 4upx;
						font-weight: 500;
						color: $font-color-dark;
					}
				}
			}
			.input-box {

				font-size: $font-sm;
				box-sizing: border-box;
				color: #999;
				display: flex;
				align-items: center;
				overflow: hidden;
				height: 60upx;
				background-color: $page-color-base;
				border-radius: 30upx;
				position: relative;
				margin: 0 20upx 0 10upx;
				.iconsousuo2 {
					z-index: 100;
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: $font-lg + 4upx;
					color: $font-color-dark;
				}
				input {
					width: 100%;
					padding-left: 28upx;
					height: 28upx;
					color: $font-color-base;
					font-size: 28upx;
				}
			}
		}
		/*screen*/
		.rf-header-screen {
			width: 100%;
			background: $color-white;
			position: fixed;
			z-index: 99;
			.rf-screen-top,
			.rf-screen-bottom {
				border: none;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;
				color: #333;
			}
			.rf-screen-top {
				height: 88upx;
				line-height: 88upx;
				position: relative;
				background: $color-white;
			}
			.rf-top-item {
				height: 28upx;
				line-height: 28upx;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont {
					font-size: $font-lg + 4upx;
					font-weight: 500;
				}
			}
			.rf-screen-bottom {
				height: 100upx;
				padding: 0 30upx;
				box-sizing: border-box;
				font-size: 24upx;
				align-items: center;
				overflow: hidden;
			}
			.rf-bottom-text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.rf-bottom-item {
				flex: 1;
				width: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 12upx;
				box-sizing: border-box;
				margin-right: 20upx;
				white-space: nowrap;
				height: 60upx;
				border-radius: 40upx;
			}
			.rf-bottom-item:last-child {
				margin-right: 0;
			}
			.rf-bold {
				font-weight: bold;
			}
			.rf-active {
				color: $base-color;
			}
			.rf-icon-ml .rf-icon-class {
				margin-left: 6upx;
			}
			.rf-ml {
				margin-left: 6upx;
			}
			.rf-seizeaseat-20 {
				height: 20upx;
			}
			.rf-seizeaseat-30 {
				height: 30upx;
			}
			.rf-icon-middle .rf-icon-class {
				vertical-align: middle;
			}
			.rf-middle {
				vertical-align: middle;
			}
		}
		/*screen*/
		.rf-btmItem-active {
			border-radius: 32upx;
			font-weight: bold;
			position: relative;
		}
		.rf-btmItem-normal {
			border: 1upx solid rgba(0, 0, 0, 0.12);
			position: relative;
		}
		.rf-btmItem-active::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 40upx;
			left: 0;
			top: 0;
		}
		.rf-btmItem-tap {
			position: relative;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}
		.rf-btmItem-tap::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 22upx;
			background: #f7f7f7;
			left: 0;
			top: 58upx;
		}
		.product-list-wrapper {
			/*#ifdef MP*/
			padding-top: 360rpx;
		  /*#endif*/
		}
	}
	.search-ad {
		flex: 0 0 auto;
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		min-width: 80rpx;
		padding: 0 10rpx;
		margin-left: 10rpx;
		/* 确保筛选按钮可见 */
		/* background-color: rgba(255, 0, 0, 0.1); */ /* 临时调试背景色 - 已移除 */

		.rf-top-item {
			height: auto;
			line-height: normal;
			padding: 8rpx 16rpx;
			background-color: #f5f5f5;
			border-radius: 20rpx;
			font-size: 26rpx;
			color: #333;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;

			&:hover {
				background-color: #e0e0e0;
			}
		}
	}
	.attr-group {
		margin-bottom: 20rpx;
		background: #fff;

		.attr-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background: #fff5f5;
			font-size: 28rpx;
		}

		.attr-content {
			padding: 20rpx;
		}
	}

	.attr-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;

		&.selected {
			color: #e4393c;
		}

		.check-icon {
			color: #e4393c;
			font-size: 24rpx;
		}
	}

	.search-box {
		margin-bottom: 20rpx;

		.search-input {
			width: 100%;
			height: 60rpx;
			background: #f5f5f5;
			border-radius: 30rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
		}
	}

	.arrow-icon {
		font-size: 24rpx;
		color: #999;
	}
	.attr-section {
		background: #fff;
		margin-bottom: 20rpx;
		width: 100%; /* 确保宽度是100% */
		display: block; /* 确保是块级元素 */
	}

	.attr-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: #fff5f5;
		font-size: 28rpx;
		color: #333;

		.arrow-icon {
			color: #999;
			font-size: 24rpx;
		}
	}

	.attr-content {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.search-box {
		margin-bottom: 20rpx;

		.search-input {
			width: 100%;
			height: 60rpx;
			background: #fff;
			border: 1px solid #eee;
			border-radius: 30rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
	}

	.attr-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		width: 100%;
		box-sizing: border-box;

		checkbox {
			transform: scale(0.8);
		}

		.attr-label {
			margin-left: 10rpx;
			font-size: 26rpx;
			color: #333;
		}
	}
	.attr-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.attr-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
  width: 100%;
  box-sizing: border-box;

  checkbox {
    transform: scale(0.8);
  }

  .attr-label {
    margin-left: 10rpx;
    font-size: 26rpx;
    color: #333;
    flex: 1;
  }
}
.item-selected {
  background-color: #fff5f5;
}

.item-selected text {
  color: #e4393c !important;
  font-weight: bold;
}

.custom-checkbox {
  position: relative;
  width: 36rpx;
  height: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-icon {
  width: 32rpx;
  height: 32rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-selected {

  border-color: #e4393c;
}

.checkbox-tick {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}
.rf-category-item {
  width: 95%;
  height: 64upx;
  display: flex;
  align-items: center;
  padding: 0 4upx;
  box-sizing: border-box;
  border-radius: 32upx;
  margin-bottom: 10upx;
  margin-left: 5upx;
}

.level-0 {
  margin-left: 0;
  font-weight: bold;
}

.level-1 {
  margin-left: 20upx;
}

.level-2 {
  margin-left: 40upx;
}

.level-3 {
  margin-left: 60upx;
}

.category-picker {
  width: 100%;
  margin-bottom: 20rpx;
}

.tree-picker {
  width: 100%;
}


/* 自定义样式，尝试覆盖默认样式 */
.uni-picker-custom {
  text-align: left !important;
}

.picker-view {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  display: flex;
  justify-content: flex-start; /* 改为左对齐 */
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
  margin-left: auto; /* 将箭头推到右侧 */
  flex-shrink: 0;
}


.category-select-container {
  margin-bottom: 20rpx;
}

.category-label {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.category-picker {
  width: 100%;
}

.picker-view {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
}

.category-path {
  margin-top: 20rpx;
  padding: 15rpx;
  background-color: #fff5f5;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #e4393c;
  border: 1px solid #ffebeb;
  text-align: left;
	}
/* 下拉内容左对齐，只用 ::v-deep */
::v-deep .uni-picker-view-content {
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}



::v-deep .uni-picker-container .uni-picker-item {
  text-align: left !important;
  border: 1px solid #ff0000 !important;
}

.picker-trigger {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.picker-text {
  flex: 1;
  text-align: left;
  font-size: 28rpx;
  color: #333;
}

.picker-arrow {
  color: #999;
  font-size: 24rpx;
  margin-left: 10rpx;
}

/* 覆盖 rf-picker 弹窗高度 */
:deep(.mpvue-picker-view) {
  height: 50vh !important; /* 设置为屏幕高度的50% */
}

:deep(.mpvue-picker-content) {
  max-height: 70vh; /* 限制整个弹窗最大高度 */
  background-color: #fff;
}

:deep(.picker-item) {
  line-height: 50px; /* 适当增加选项高度 */
  font-size: 28rpx;
  padding: 0 20rpx;
  text-align: left;
}

:deep(.mpvue-picker__hd) {
  padding: 20rpx 30rpx;
  font-size: 32rpx;
  background-color: #f8f8f8;
}

:deep(.mpvue-picker__action) {
  font-size: 32rpx;
}

.picker-item{text-align: left !important;}

</style>
